'use client';

import FloatingBackButton from './FloatingBackButton';

// 基本用法示例
export function BasicUsage() {
  return (
    <div>
      <h1>我的页面</h1>
      <p>这是页面内容...</p>
      
      {/* 添加悬浮返回按钮 */}
      <FloatingBackButton />
    </div>
  );
}

// 自定义样式示例
export function CustomStyleUsage() {
  return (
    <div>
      <h1>产品详情页</h1>
      <p>产品信息...</p>
      
      {/* 自定义样式的悬浮返回按钮 */}
      <FloatingBackButton
        size={56}
        backgroundColor="#ff4d4f"
        color="#ffffff"
        position="left"
        topOffset={-20}
      />
    </div>
  );
}

// 在布局中使用示例
export function LayoutUsage() {
  return (
    <div className="min-h-screen">
      {/* 页面头部 */}
      <header className="bg-white shadow-sm p-4">
        <h1 className="text-xl font-semibold">页面标题</h1>
      </header>
      
      {/* 页面内容 */}
      <main className="p-4">
        <p>页面主要内容...</p>
        <p>更多内容...</p>
      </main>
      
      {/* 悬浮返回按钮 - 始终显示在移动端 */}
      <FloatingBackButton />
    </div>
  );
}

// 在管理后台中使用示例
export function AdminUsage() {
  return (
    <div className="admin-layout">
      {/* 侧边栏 */}
      <aside className="admin-sidebar">
        {/* 侧边栏内容 */}
      </aside>
      
      {/* 主内容区 */}
      <main className="admin-main">
        <h1>管理页面</h1>
        <p>管理功能...</p>
      </main>
      
      {/* 悬浮返回按钮 - 在移动端显示，桌面端隐藏 */}
      <FloatingBackButton showOnDesktop={false} />
    </div>
  );
}
